<template>
	<view>
		<div class="title" @click="comeBack()">
			<image src="../../static/icon_arrow_blue_left.png"></image>
			请选择服务类型
		</div>
		<div class="uni-list">
			<checkbox-group @change="checkboxChange">
				<div class="options" v-for="item in selectedOrderList" :key="item">
					<div class="optionsIcon">
						<checkbox disabled="true" :value="item" checked="true" />
					</div>
					<div class="optionsInfo">
						<div class="info">
							<span class="left">处方号：{{item["YZID"]}}</span>
							<span class="right">￥{{item["JE"]}}</span>
						</div>
						<div>支付明细</div>
						<div class="info" v-for="info in item.fm_list">
							<span class="left">{{info["MC"]}}</span>
							<span class="right">￥{{info["JE"]}}</span>

							<div v-if="(info['MXLIST']['MX'] instanceof Array) == false" class="infoList">
								<span class="left"> {{info['MXLIST']['MX']["MC"]}}</span>
								<span class="right">￥{{info['MXLIST']['MX']["DJ"]}}</span>
							</div>

							<div v-if="(info['MXLIST']['MX'] instanceof Array) == true" class="infoList"
								v-for=" message in info['MXLIST']['MX']">
								<span class="left"> {{message["MC"]}}</span>
								<span class="right">￥{{message["DJ"]}}</span>
							</div>
						</div>



					</div>
				</div>
			</checkbox-group>
		</div>

		<div class="footer">
			<div class="all">全选</div>
			<div class="number">总金额：{{totalAmount}}</div>
			<div class="button" @click="goToPay()">去结算</div>
		</div>
	</view>
</template>

<script lang="ts">
	import { globalVariable } from '../../globalVariable/globalVariable';
	import { request } from '../../Providing/request'
	import { uiCollection } from '../../Providing/uiCollection';
	export default {
		data() {
			return {
				selectedOrderList: [],
				totalAmount: 0,
				seletedAll: false,
			};
		},

		methods: {
			checkboxChange(e) {
				console.log("多选框被触发返回内容", e.detail.value);
				let amount = 0;
				this.selectedOrderList = e.detail.value;
				e.detail.value.forEach((item) => {
					amount = amount + parseFloat(item["JE"])
				})

				console.log(amount);
				this.totalAmount = amount;

			},

			getPayList() {
				new request().postPaymentNote().then((res : any) => {
					console.log('postPaymentNote', JSON.stringify(res));
					if (res['length'] > 0) {
						let amount = 0;
						this.selectedOrderList = res.filter(item => item['ZFZT'] !== '1');
						this.selectedOrderList.forEach((item) => {
							console.log('打印foreach执行计算总金额', item['JE'])
							amount += parseFloat(item['JE']);
						})
						this.totalAmount = amount;
						console.log("打印金额", amount, this.totalAmount)
					}
				}).catch((err) => {
					uiCollection.showToast(err)
				})

			},
			comeBack() {
				uni.$emit("goToMenuList");
			},
			goToPay() {
				if (this.selectedOrderList.length > 0 && this.totalAmount > 0) {

					new request().postBatchPayDev({ "cardId": globalVariable.cardId, djList: this.selectedOrderList }).then((res : string) => {
						console.log("下单返回res", res)
						globalVariable.qrCodePay.amount = String(this.totalAmount);
						globalVariable.qrCodePay.url = res;
						globalVariable.qrCodePay.type = "缴费";

						uni.$emit("goToQrCodePay");
					}).catch((err) => {
						uiCollection.showToast(err)
					})
				} else {
					uiCollection.showToast("没有选中的待结算单据");
				}



			}
		},
		created() {
			this.getPayList()
		}
	}
</script>

<style lang="scss">
	.title {
		width: 100%;
		height: 40px;
		line-height: 40px;
		margin-left: 10px;
		color: #2f59f3;
		letter-spacing: 25px;
		text-indent: 10px;
		margin: auto;
		padding-left: 20px;
		background-color: #fff;

		image {
			width: 15px;
			height: 30px;
			top: 5px;
			float: left;


		}
	}

	.uni-list {
		padding-bottom: 100px;

		.options {
			display: flex;
			width: 90%;
			margin: auto;
			border-bottom: 2px solid #555;

			.optionsIcon {

				width: 50px;

			}

			.optionsInfo {
				flex: 1;

				.info {
					display: flex;
					flex-wrap: wrap;

					.left {
						flex: 1;
						text-align: left;
					}

					.right {
						flex: 1;
						text-align: right;
					}

					.infoList {
						flex-direction: column;
						width: 100%;
						// display: flex;

						.left {
							display: inline-block;
							width: 50%;
							text-align: left;
						}

						.right {
							display: inline-block;
							width: 50%;
							text-align: right;
						}
					}
				}

			}
		}

	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #dbdbdb;
		display: flex;

		.all {
			line-height: 50px;
			width: 70px;
			text-align: center;
		}

		.number {
			padding: 0 20px;
			line-height: 50px;
			flex: 1;
		}

		.button {
			width: 120px;
			text-align: center;
			line-height: 50px;
			background: #12e684;
			color: #fff;
		}
	}
</style>